<template>
  <div class="earthds_header">
    <div class="header_left">
      <div class="earthds_logo">3DTILES 可视化编辑器</div>
      <div class="earthds_menu">
        <div class="earthds_menu_item" v-for="item in mainMenuList" @click="addComponent(item)" :key="item.id"
          :class="{ 'actived_earthds_menu_item': item.status == 'active' }">
          {{ item.name }}
        </div>
      </div>

    </div>
    <div class="hearder-right">
      <div>
      </div>
      <div class="debugging">
        <div class="item">
          <div>地球颜色：</div>
          <el-color-picker v-model="globeBaseColorRef" show-alpha size="small" />
        </div>
        <div class="item">
          <div>显示地球：</div>
          <el-switch v-model="globeShowRef" size="small" />
        </div>
        <div class="item">
          <div>深度检测：</div>
          <el-switch v-model="depthTestAgainstTerrainRef" size="small" />
        </div>
        <div class="item">
          <div>调试面板：</div>
          <el-switch v-model="showCesium3DTilesInspectorRef" size="small" @change="changeInspector" />
        </div>
        <div class="item">
          <div>时间线：</div>
          <div class="range-box">
            <el-slider class="range-slider" v-model="time" @input="timeChange" :min="0" :max="720" :step="1"
              :show-tooltip="false" />
            <div class="range-num">{{ timeStr }}</div>
          </div>
        </div>
        <div class="item">
          <div>fov：</div>
          <div class="range-box">
            <el-slider class="range-slider" v-model="fovRef" :min="10" :max="170" :step="1" :show-tooltip="false" />
            <div class="range-num">{{ fovRef }}</div>
          </div>
        </div>
      </div>
      <div class="engine">
        <!-- <el-button class="common-btn" @click="showDialog = true">服务合并</el-button> -->
        <el-button class="common-btn" v-if="typeNameRef == 'ESUeViewer'" @click="switchCesium">切换Cesium</el-button>
        <el-button class="common-btn" v-if="typeNameRef == 'ESCzmViewer'" @click="switchUE">切换UE</el-button>
      </div>
    </div>

  </div>
  <component v-for="item in menuListRef" :key="item.id" :is="item.com" :comInfo="item" @cancel="removeComponent">
  </component>
  <SwitchEngine v-if="showESSSDialogRef"></SwitchEngine>

  <ServiceMerge v-if="showDialog" @close="showDialog = false" />

  <TooltipCom v-if="switchEngineDialog" :content="content" :title="'提示'" :isVisible="true" @close="switchClose"
    @confirm="switchConfirm" />
</template>

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref, watch, shallowRef } from "vue";
import { MenuItem } from "@/scripts/dataTypes";
import SwitchEngine from "@/components/SwitchEngine.vue";
import {
  createVueDisposer,
  toVR,
} from "vue-xe2-plugin/dist-node/components/xe2/tools";
import { mainMenuList } from "@/scripts/menu/mainMenuList";
import { getProjectManager } from "@/scripts/getProjectManager";
import { cssColorToXe2Color, extractNumbersFromRGBA, getUrlParam, timestampToTime, timeToTimestamp } from "@/scripts/utils";
import { getServer, reqGetPort } from "@/api";
import TooltipCom from "@/components/common/TooltipCom.vue";
import ServiceMerge from "@/components/ServiceMerge.vue";


import { ElMessage } from "element-plus";


const objm = getProjectManager();
const d = createVueDisposer(onBeforeUnmount);
const switchEngine = objm.switchEngine;
const cimrtsManager = objm.cimrtsManager;
const modelserManager = objm.modelserManager;
const modelser2Manager = objm.modelser2Manager;
const eSForestManager = objm.eSForestManager;




const typeNameRef = toVR(d, [objm, "typeName"]);
const globeShowRef = toVR<boolean>(d, [objm, 'globeShowRef'])//显示地球
const depthTestAgainstTerrainRef = toVR<boolean>(d, [objm, 'depthTestAgainstTerrainRef'])//地形深度检测
const currentTimeRef = toVR<boolean>(d, [objm, 'currentTime'])// 当前时间
const fovRef = toVR<boolean>(d, [objm, 'fov'])// fov

const time = ref(360); //时间
const timeStr = ref("12:00");
//时间函数
const timeChange = (val: any) => {
  time.value = val;
  const integer = Math.floor(val / 30);
  const remainder = (val % 30) * 2;
  timeStr.value = `${integer}:${remainder >= 0 && remainder <= 9 ? "0" + remainder : remainder
    }`;
  const date = timeToTimestamp(
    timestampToTime(
      integer === 0 ? "00" : integer,
      remainder === 0 ? "00" : remainder
    )
  );

  // @ts-ignore
  currentTimeRef.value = date;
};

const menuListRef = ref<MenuItem[]>([]);

// 添加组件
const addComponent = (item: MenuItem) => {
  item.status != "active" ? item.status = "active" : item.status = "none";
  if (item.status == "active") {
    menuListRef.value.push(item);
  }
  else {
    removeComponent(item.id)
  }
};

// 删除组件
const removeComponent = (id: string) => {
  menuListRef.value = menuListRef.value.filter((i) => i.id !== id);
  const item = mainMenuList.value.find((i: any) => i.id === id) as MenuItem;
  item.status = 'none'
};

// 是否显示遮罩层
const showESSSDialogRef = toVR<any>(d, [switchEngine, "showESSSDialog"]);

const cimrtsSceneTreeWrapper = objm.cimrtsSceneTreeWrapper

const showDialog = ref(false);

// 当前打开的弹框组件
const switchEngineDialog = toVR<any>(d, [switchEngine, "switchEngineDialog"]);

const content = "列表中有正在编辑的对象尚未提交，强制切换引擎会丢失修改，是否继续？";

const switchUE = () => {
  switchEngine.switchUE();
};

const switchCesium = () => {
  switchEngine.switchCesium();
};

// 切换视口 确定按钮
const switchConfirm = () => {
  switchEngine.switchEngineDialogEvent.emit("confirm")
}

const switchClose = () => {
  switchEngine.switchEngineDialogEvent.emit("close")
}

const activeViewerRef = toVR<any>(d, [objm, "activeViewer"]);

// // 显示调试面板
let showCesium3DTilesInspectorRef = ref(false);

const changeInspector = (e: any) => {
  activeViewerRef.value.innerViewer.showCesium3DTilesInspector = e
}

onMounted(async () => {
  // await earthdsManger.init()

  const obj = getUrlParam();
  if (!obj) return;

  // cimrts服务
  if (obj.hasOwnProperty("cimrts")) {
    const cimrts = mainMenuList.value.find((i: any) => i.id === "cimrtsView") as MenuItem;
    cimrts.status = "active";
    menuListRef.value = [...menuListRef.value, cimrts];
    cimrtsManager.cimrtsUrl = obj.cimrts;
  }

  // // modelser 服务
  // if (obj.hasOwnProperty("modelser")) {
  //   const modelser = mainMenuList.value.find((i) => i.id === "modelserView") as MenuItem;
  //   modelser.status = "active";
  //   menuListRef.value = [...menuListRef.value, modelser];
  //   modelserManager.modelserUrl = obj.modelser
  // }

  // modelser2 服务
  if (obj.hasOwnProperty("modelser")) {
    const modelser2 = mainMenuList.value.find((i) => i.id === "modelser2View") as MenuItem;
    modelser2.status = "active";
    menuListRef.value = [...menuListRef.value, modelser2];
    modelser2Manager.modelser2Url = obj.modelser
  }


  // esforest 服务
  if (obj.hasOwnProperty("esForest")) {
    const esForest = mainMenuList.value.find((i) => i.id === "eSForest") as MenuItem;
    esForest.status = "active";
    menuListRef.value = [...menuListRef.value, esForest];
    eSForestManager.esForestUrl = obj.esForest
  }
});

const globeBaseColorRef = ref('rgba(255, 255, 255, 1)');
watch(globeBaseColorRef, () => {
  const rgba = extractNumbersFromRGBA(globeBaseColorRef.value)
  objm.globeBaseColor = cssColorToXe2Color(rgba)
})


</script>

<style scoped>
.earthds_header {
  width: 100%;
  height: 50px;
  background-color: #fff;
  border-bottom: 1px solid #111111;
  box-sizing: border-box;
  color: black;
  line-height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;

}

.header_left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.earthds_logo {
  width: 230px;
  padding: 0px 20px;
  font-size: 18px;
  font-weight: bold;
  box-sizing: border-box;
  color: #357EFA;

}

.earthds_menu {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
}

.earthds_menu_item {
  width: 85px;
  cursor: pointer;
  font-size: 14px;
  box-sizing: border-box;
  text-align: center;
}


.earthds_menu_item:hover {
  font-weight: bold;
  color: #357EFA;
}

.actived_earthds_menu_item {
  font-weight: bold;
  color: #357EFA;
}

.hearder-right {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 10px;
}

.debugging {
  height: 100%;
  display: flex;
  gap: 20px;
}

.item {
  display: flex;
  align-items: center;
}
</style>
